<template>
  <div class="layout-container">
    <el-container class="app-container">
      <!-- 头部导航 -->
      <el-header class="app-header">
        <div class="header-left">
          <span class="logo">📚 学生选课系统</span>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="user-dropdown">
              <el-avatar :size="32" :src="avatarUrl">
                {{ authStore.user?.name?.charAt(0) || 'U' }}
              </el-avatar>
              <span class="user-name">
                {{ authStore.user?.name || authStore.user?.username }} 
                ({{ authStore.getUserRoleText }})
              </span>
              <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container class="main-container">
        <!-- 侧边栏 -->
        <el-aside :width="sidebarCollapsed ? '64px' : '220px'" class="app-sidebar">
          <div class="sidebar-toggle" @click="toggleSidebar">
            <el-icon><Expand v-if="sidebarCollapsed" /><Fold v-else /></el-icon>
          </div>
          
          <el-menu
            :router="true"
            :default-active="$route.path"
            :collapse="sidebarCollapsed"
            class="sidebar-menu"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
          >
            <!-- 仪表板 -->
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <template #title>仪表板</template>
            </el-menu-item>

            <!-- 学生功能 -->
            <template v-if="authStore.isStudent">
              <el-menu-item index="/courses">
                <el-icon><Reading /></el-icon>
                <template #title>所有课程</template>
              </el-menu-item>
              <el-menu-item index="/my-courses">
                <el-icon><Document /></el-icon>
                <template #title>我的课程</template>
              </el-menu-item>
            </template>

            <!-- 教师功能 -->
            <template v-if="authStore.isTeacher">
              <el-menu-item index="/courses">
                <el-icon><Reading /></el-icon>
                <template #title>课程浏览</template>
              </el-menu-item>
              <el-menu-item index="/teacher/courses">
                <el-icon><UserFilled /></el-icon>
                <template #title>我的授课</template>
              </el-menu-item>
            </template>

            <!-- 管理员功能 -->
            <template v-if="authStore.isAdmin">
              <el-sub-menu index="admin">
                <template #title>
                  <el-icon><Setting /></el-icon>
                  <span>系统管理</span>
                </template>
                <el-menu-item index="/admin/users">
                  <el-icon><User /></el-icon>
                  <template #title>用户管理</template>
                </el-menu-item>
                <el-menu-item index="/admin/courses">
                  <el-icon><Reading /></el-icon>
                  <template #title>课程管理</template>
                </el-menu-item>
                <el-menu-item index="/admin/selections">
                  <el-icon><Document /></el-icon>
                  <template #title>选课记录</template>
                </el-menu-item>
              </el-sub-menu>
              
              <!-- 管理员也可以查看课程 -->
              <el-menu-item index="/courses">
                <el-icon><Reading /></el-icon>
                <template #title>课程浏览</template>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="app-main">
          <div class="main-content">
            <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import {
  User,
  SwitchButton,
  ArrowDown,
  Expand,
  Fold,
  Odometer,
  Reading,
  Document,
  Setting,
  UserFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()
const sidebarCollapsed = ref(false)

const avatarUrl = computed(() => {
  // 可以根据用户信息生成头像URL，这里使用默认
  return null
})

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const handleCommand = (command) => {
  if (command === 'profile') {
    ElMessage.info('个人中心功能待开发...')
  } else if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      authStore.logout()
      router.push('/login')
      ElMessage.success('已退出登录！')
    }).catch(() => {
      // 用户取消
    })
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100%;
}

.app-container {
  height: 100%;
}

.app-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left .logo {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.user-dropdown:hover {
  background-color: #f5f7fa;
}

.user-name {
  font-size: 14px;
  color: #606266;
}

.main-container {
  height: calc(100vh - 60px);
}

.app-sidebar {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar-toggle {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #263445;
  color: #bfcbd9;
  transition: background-color 0.2s;
}

.sidebar-toggle:hover {
  background-color: #1f2d3d;
}

.sidebar-menu {
  border-right: none;
  height: calc(100% - 54px);
  overflow-y: auto;
}

.app-main {
  background-color: #f0f2f5;
  padding: 0;
  overflow: hidden;
}

.main-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

/* 路由切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.2s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 滚动条样式 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.sidebar-menu::-webkit-scrollbar) {
  width: 6px;
}

:deep(.sidebar-menu::-webkit-scrollbar-thumb) {
  background-color: #263445;
  border-radius: 3px;
}

:deep(.main-content::-webkit-scrollbar) {
  width: 8px;
}

:deep(.main-content::-webkit-scrollbar-thumb) {
  background-color: #c1c1c1;
  border-radius: 4px;
}

:deep(.main-content::-webkit-scrollbar-thumb:hover) {
  background-color: #a8a8a8;
}
</style> 